.pageTabs {
  background: #dee1e6;
  padding: 6px 8px 0;
  position: sticky;
  top: 64px;
  z-index: 99;

  :global {
    .ant-tabs {
      margin: 0;

      .ant-tabs-nav {
        margin: 0;
        padding: 0;

        &::before {
          border: none;
        }
      }

      .ant-tabs-nav-list {
        gap: 2px;
      }

      .ant-tabs-tab {
        position: relative;
        padding: 0;
        margin: 0;
        background: #c5c9ce;
        border: none;
        border-radius: 6px 6px 0 0;
        transition: background 0.15s ease;
        color: rgba(0, 0, 0, 0.65);
        min-width: 100px;
        max-width: 180px;
        font-size: 13px;

        &:hover:not(.ant-tabs-tab-active) {
          background: #b4b8bd;
        }

        &.ant-tabs-tab-active {
          background: #fff;
          color: rgba(0, 0, 0, 0.88);

          .ant-tabs-tab-btn {
            color: #1890ff;
            font-weight: 500;
          }
        }
      }

      .ant-tabs-tab-btn {
        display: flex;
        align-items: center;
        padding: 6px 10px;
        width: 100%;
      }

      .ant-tabs-tab-remove {
        position: absolute !important;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 !important;
        color: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 0.15s ease, background 0.15s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        font-size: 11px;

        &:hover {
          color: rgba(0, 0, 0, 0.88);
          background: rgba(0, 0, 0, 0.1);
        }
      }

      .ant-tabs-tab:hover .ant-tabs-tab-remove {
        opacity: 1;
      }

      .ant-tabs-tab-active .ant-tabs-tab-remove {
        opacity: 1;
        color: rgba(0, 0, 0, 0.65);

        &:hover {
          color: rgba(0, 0, 0, 0.88);
          background: rgba(0, 0, 0, 0.06);
        }
      }

      // 有关闭按钮时，调整文本区域
      .ant-tabs-tab:not([data-node-key$="-add"]) .ant-tabs-tab-btn {
        padding-right: 28px;
      }
    }
  }
}

.tabLabel {
  user-select: none;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

// 深色模式
[data-theme='dark'] {
  .pageTabs {
    background: #2d2d2d;

    :global {
      .ant-tabs-tab {
        background: #3d3d3d;
        color: rgba(255, 255, 255, 0.65);

        &:hover:not(.ant-tabs-tab-active) {
          background: #4d4d4d;
          color: rgba(255, 255, 255, 0.85);
        }

        &.ant-tabs-tab-active {
          background: #1e1e1e;
          color: rgba(255, 255, 255, 0.88);

          .ant-tabs-tab-btn {
            color: #1890ff;
          }
        }
      }

      .ant-tabs-tab-remove {
        color: rgba(255, 255, 255, 0.45);

        &:hover {
          color: rgba(255, 255, 255, 0.88);
          background: rgba(255, 255, 255, 0.1);
        }
      }

      .ant-tabs-tab-active .ant-tabs-tab-remove {
        color: rgba(255, 255, 255, 0.65);

        &:hover {
          color: rgba(255, 255, 255, 0.88);
          background: rgba(255, 255, 255, 0.08);
        }
      }
    }
  }
}



